<template>
  <div>
    <div class="infos">
      <div> <div class="title">用户名</div><div>{{user.username}}</div> </div>
      <div> <div class="title">姓&nbsp;名</div><div>{{user.realname}}</div> </div>
      <div> <div class="title">手机号</div><div>{{user.telephone}}</div> </div>
      <div> <div class="title">性&nbsp;别</div><div>{{user.gender=='male'?'男':'女'}}</div> </div>
      <div> <div class="title">注册时间</div><div>{{moment(user.registerTime).format('YYYY-MM-DD')}}</div> </div>
      <div> <div class="title">状&nbsp;态</div><div>{{user.status}}</div> </div>
      <img v-if="user.userFace" :src="user.userFace" style="width:150px;height:150px;border-radius:50%;position:absolute;left:350px;top:2em" alt="">
      <img v-else style="width:150px;height:150px;border-radius:50%;position:absolute;left:350px;top:2em"  src="https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3" alt="">
      <div>
        <div class="title">
          <el-button type="primary" size="small" @click="toEditHandler"> 修改 </el-button>
        </div>
        <div></div>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog title="修改个人信息" :visible.sync="visible" width="50%" >
      <div>
        <!-- {{form}} -->
        <el-form :model="form" ref="clazzForm" :rules="rules" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="form.realname"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="form.telephone"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitHandler">确定</el-button>
      </span>
    </el-dialog>
    <!-- /模态框 -->
  </div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'
import moment from 'moment'
import {post} from '@/utils/request'
export default {
  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
      visible:false,
      form:{},
      rules:{
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([ 'user' ])
  },
  methods:{
    ...mapActions('user',['getInfo']),
    moment,
    submitHandler(){
      let url = "/baseUser/saveOrUpdate"
      post(url,this.form).then(response =>{
        this.visible = false;
        this.$message({type:"success",message:response.message})
        this.getInfo();
      })
    },
    toEditHandler(){
      this.form = this.user;
      this.visible = true;
    }
  }
}
</script>

<style scoped>
  .infos{
    position: relative;
  }
  .infos >div::after {
    content: "";
    display: block;
    clear: both;
  }
  .infos > div >div {
     line-height: 2em;
      height: 2em;
      /* border-bottom: 1px solid #ededed; */
  }
  .infos > div >div.title {
    float: left;
    width: 100px;
    font-weight: bold;
    color: #666;
    text-align:left;
  }
  .infos > div >div:last-child{
    color: #999;
    margin-left: 100px;
    padding-left: 1em;
  }


</style>
